<template>
  <div class="home">
    <!-- 顶栏 -->
    <div class="top">
      <ul class="nav">
        <li>
          红魔
          <div class="header-content">
            <div class="tab">
              <ul class="tab-control"></ul>
              <div class="tab-card">
                <div class="tab-content show">
                  <div class="shop">
                    <img class="shop-img" src="/img/phone1.png" alt="" />
                    <h2>红魔8Pro+</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/phone2.png" alt="" />
                    <h2>红魔8Pro</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/phone3.png" alt="" />
                    <h2>红魔7S Pro</h2>
                    <h3></h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/phone4.png" alt="" />
                    <h2>红魔7S</h2>
                    <h3></h3>
                  </div>
                  <div class="more-info">查看更多</div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          努比亚
          <div class="header-content">
            <div class="tab">
              <ul class="tab-control"></ul>
              <div class="tab-card">
                <div class="tab-content show">
                  <div class="shop">
                    <img class="shop-img" src="/img/phone5.png" alt="" />
                    <h2>nubia Z50</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/phone6.png" alt="" />
                    <h2>nubia Z30Pro</h2>
                    <h3></h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <span @mouseenter="flagIndex = 1">智能生态</span>
          <div class="header-content">
            <div class="tab">
              <ul class="tab-control">
                <li @mouseenter="flagIndex = 1">新品</li>
                <li @mouseenter="flagIndex = 2">电竞设备</li>
                <li @mouseenter="flagIndex = 3">手机充电</li>
                <li @mouseenter="flagIndex = 4">智能穿戴</li>
                <li @mouseenter="flagIndex = 5">手机壳膜</li>
              </ul>
              <div class="tab-card toggle-flag">
                <div class="tab-content show" v-show="flagIndex == 1">
                  <div class="shop">
                    <img class="shop-img" src="/img/new1.png" alt="" />
                    <h2>中兴Z4 pro 4K机顶盒</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/new2.png" alt="" />
                    <h2>红魔影刃手柄</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/new3.png" alt="" />
                    <h2>红魔游戏键盘</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/new4.png" alt="" />
                    <h2>红魔鼠标垫</h2>
                    <h3>新品</h3>
                  </div>
                  <!-- <div class="more-info">查看更多</div> -->
                </div>
                <div class="tab-content show" v-show="flagIndex == 2">
                  <div class="shop">
                    <img class="shop-img" src="/img/dj1.png" alt="" />
                    <h2>红魔影刃手柄</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/dj2.png" alt="" />
                    <h2>红魔游戏键盘</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/dj3.png" alt="" />
                    <h2>红魔鼠标垫</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/dj4.png" alt="" />
                    <h2>红魔电竞显示屏</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="more-info">查看更多</div>
                </div>
                <div class="tab-content show" v-show="flagIndex == 3">
                  <div class="shop">
                    <img class="shop-img" src="/img/sj1.png" alt="" />
                    <h2>C to L MFI 大白硅胶数据线</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/sj2.png" alt="" />
                    <h2>大白20W单口充电器</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/sj3.png" alt="" />
                    <h2>100W四口Gan3 Pro套装</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/sj4.png" alt="" />
                    <h2>65W三口Gan3 Pro套装</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="more-info">查看更多</div>
                </div>
                <div class="tab-content show" v-show="flagIndex == 4">
                  <div class="shop">
                    <img class="shop-img" src="/img/zn1.png" alt="" />
                    <h2>努比亚新音C1蓝牙耳机</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/zn2.png" alt="" />
                    <h2>红魔手表-活力版</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/zn3.png" alt="" />
                    <h2>努比亚真无线蓝牙耳机T1</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/zn4.png" alt="" />
                    <h2>红魔手表</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="more-info">查看更多</div>
                </div>
                <div class="tab-content show" v-show="flagIndex == 5">
                  <div class="shop">
                    <img class="shop-img" src="/img/km1.png" alt="" />
                    <h2>红魔8Pro电竞导热保护壳</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/km2.png" alt="" />
                    <h2>红魔8系电竞钢化膜</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/km3.png" alt="" />
                    <h2>红魔7S电竞导热保护壳</h2>
                    <h3></h3>
                  </div>
                  <!-- <div class="more-info">查看更多</div> -->
                </div>
              </div>
            </div>
          </div>
        </li>
        <li><h1 class="logo"></h1></li>
        <li>服务</li>
        <li>品牌</li>
        <li>社区</li>
      </ul>
      <ul class="user-block">
        <li>
          <a href=""><i class="user"></i></a>
          <div class="toggle-user">
            <ul>
              <li class="border-line" v-if="!flag">
                <!-- <a class="login" href="#/Login">立即登录</a> -->
                <router-link class="login" to="/Login">立即登录</router-link>
                <span class="reg-des"
                  >无账号？<a class="register" href="#/Register"
                    >立即注册</a
                  ></span
                >
              </li>
              <li class="border-line" v-else>
                <a class="unlogin" href="javascript:void(0)" @click="quituser"
                  >退出登录</a
                >
              </li>
              <li class="common-li border-line"><a href="">个人中心</a></li>
              <li class="common-li border-line"><a href="">我的订单</a></li>
              <li class="common-li border-line"><a href="">我的优惠券</a></li>
              <li class="common-li border-line"><a href="">我的收藏</a></li>
              <li class="common-li border-line"><a href="">我的预约</a></li>
              <li class="common-li"><a href="">收获地址</a></li>
            </ul>
          </div>
        </li>
        <li @click="carFn">
          <a class="car-car" href="javascript:void(0)"
            ><i class="shop-car"></i
          ></a>
        </li>
        <li>
          <a href=""><i class="search"></i></a>
        </li>
      </ul>
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
      <Swiper></Swiper>
    </div>
    <!-- 内容 -->
    <div class="contents">
      <!-- 详情进入区域 -->
      <div class="cont-block">
        <router-link to="/Info/1">
          <img class="cont-img" src="/img/c-1.png" alt=""
        /></router-link>
        <router-link to="/Info/2">
          <img class="cont-img2" src="/img/c-2.png" alt=""
        /></router-link>
        <router-link to="/Info/3">
          <img class="cont-img3" src="/img/c-3.png" alt=""
        /></router-link>
        <router-link to="/Info/4">
          <img class="cont-img4" src="/img/c-4.png" alt=""
        /></router-link>
        <!-- <a href="javascript:void(0)" @click="sendshop1"
          ><img class="cont-img" src="/img/c-1.png" alt=""
        /></a> -->
        <!-- <a
          href="javascript:void(0)"
          @click="$router.push({ name: 'Info', parmas: { id: 2 } })"
          ><img class="cont-img2" src="/img/c-2.png" alt=""
        /></a>
        <a
          href="javascript:void(0)"
          @click="$router.push({ name: 'Info', parmas: { id: 3 } })"
          ><img class="cont-img3" src="/img/c-3.png" alt=""
        /></a>
        <a
          href="javascript:void(0)"
          @click="$router.push({ name: 'Info', parmas: { id: 4 } })"
          ><img class="cont-img4" src="/img/c-4.png" alt=""
        /></a> -->
      </div>

      <!-- 广告块 -->
      <div class="ad-block-my"></div>
      <!-- 文章快 -->
      <div class="cont-art">
        <div class="art-1">
          <a href=""><img src="/img/news-1.png" alt="" /></a>
          <h3>产品热评</h3>
          <p>媒体眼中的红魔7SPro大黄蜂透明极限典藏版</p>
          <a href="">了解更多></a>
        </div>
        <div class="art-1">
          <a href=""><img src="/img/news-2.png" alt="" /></a>
          <h3>新闻中心</h3>
          <p>红魔8 Pro电竞旗舰系列 全新外观+全场景生态+旗舰级影像</p>
          <a href="">了解更多></a>
        </div>
        <div class="art-1">
          <a href=""><img src="/img/news-3.png" alt="" /></a>
          <h3>视频长廊</h3>
          <p>红魔7系列变形金刚联名定制版</p>
          <a href="">了解更多></a>
        </div>
      </div>
    </div>
    <!-- 底栏区域 -->
    <div class="foot">
      <div class="foot-con main">
        <img src="/img/foot.png" alt="" />
        <div class="foot-line2">
          <div class="dl-block">
            <dl>
              <dt>关于我们</dt>
              <dd>关于红魔</dd>
              <dd>联系我们</dd>
              <dd>加入我们</dd>
              <dd>商家入驻</dd>
              <dd>合作招商</dd>
            </dl>
            <dl>
              <dt>手机</dt>
              <dd>红魔8Pro+</dd>
              <dd>红魔8Pro</dd>
              <dd>红魔7S Pro</dd>
              <dd>红魔7S</dd>
              <dd>红魔7Pro</dd>
              <dd>红魔7</dd>
              <dd>红魔6R</dd>
              <dd>红魔6</dd>
            </dl>
            <dl>
              <dt>配件</dt>
              <dd>手机充电</dd>
              <dd>电竞配件</dd>
              <dd>智能穿戴</dd>
              <dd>手机壳膜</dd>
            </dl>
            <dl>
              <dt>热门活动</dt>
              <dd>必购码通道</dd>
              <dd>以旧换新</dd>
              <dd>全民分销</dd>
            </dl>
            <dl>
              <dt>服务支持</dt>
              <dd>售后服务</dd>
              <dd>售后网点</dd>
              <dd>软件下载</dd>
              <dd>产品安全</dd>
              <dd>云服务</dd>
              <dd>红魔投屏</dd>
              <dd>红魔云驱动</dd>
              <dd>售后隐私政策</dd>
            </dl>
          </div>
          <img src="/img/tl.png" alt="" />
        </div>
        <img src="/img/foot-2.png" alt="" />
      </div>
    </div>
    <div class="tip-login" v-show="tip_flag">
      <a class="xx" href="javascript:void(0)" @click="tip_flag = false">x</a
      ><span class="tip-message">{{ tipMessage }}</span>
    </div>
    <el-backtop :bottom="140" :visibility-height="400"></el-backtop>
  </div>
</template>

<script>
import Swiper from '../components/Swiper.vue'
export default {
  data() {
    return {
      flagIndex: 0,
      flag: 0,
      tipMessage: '',
      tip_flag: false
    }
  },
  components: { Swiper },
  methods: {
    quituser() {
      document.cookie = `id=undefined;path =/;`
      this.flag = 0
      this.tipMessage = '退出账号成功！'
      this.tip_flag = true
      setTimeout(() => {
        this.tip_flag = false
      }, 2000)
    },
    carFn() {
      if (this.flag == 0) {
        this.tipMessage = '请先登录账号！！！'
        this.tip_flag = true
        setTimeout(() => {
          this.tip_flag = false
        }, 2000)
      } else if (this.flag == 1) {
        this.$router.push('/Car')
      }
    },
    sendshop1() {
      this.$router.push({ name: 'Info', parmas: { id: 1 } })
    },
    sendshop2() {
      this.$router.push({ name: 'Info', parmas: { id: 2 } })
    },
    sendshop3() {
      this.$router.push({ name: 'Info', parmas: { id: 3 } })
    },
    sendshop4() {
      this.$router.push({ name: 'Info', parmas: { id: 4 } })
    }
  },
  mounted() {
    console.log(document.cookie)
    let cookies = document.cookie.split(';')
    cookies.forEach((v) => {
      if (v.split('=')[0].trim() == 'id' && v.split('=')[1] != 'undefined') {
        this.flag = 1
      }
    })
    console.log(this.flag)
  }
}
</script>

<style lang="less" scoped>
/* 用于底部的版心 */
.main {
  width: 1202px;
  margin: 0 auto;
}
/* 顶栏 */
.top {
  height: 60px;
  background: #111;
  position: relative;
}
.nav {
  width: 687px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.nav > li {
  float: left;
  padding-left: 33px;
  padding-right: 33px;
  color: white;
  font-weight: bold;
  font-size: 15px;
}
/* .nav>li:last-child{
    margin-right: 16px;
}
.nav>li:nth-child(3),.nav>li:nth-child(4){
    margin-right: 10px;
} */
.nav > li:nth-child(4) {
  padding-right: 0px;
  padding-left: 0px;
}
.nav > li:hover {
  color: #999;
}
.nav > li > .header-content {
  position: absolute;
  background-color: #111;
  height: 0px;
  width: 100%;
  top: 60px;
  left: 0px;
  overflow: hidden;
  z-index: 999;
  transition: height 0.25s ease-in-out;
}
.nav > li:hover .header-content {
  height: 200px;
}
.logo {
  width: 66px;
  height: 60px;
  background: url(/img/logo.png) no-repeat center/56%;
}
.tab {
  width: 1200px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: left;
}
.tab-control {
  width: 68px;
  margin-left: 75px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.tab-card {
  margin-left: 9%;
}
.tab-content {
  display: flex;
  /* margin-left: 9%; */
  align-items: center;
  height: 200px;
  display: none;
}
.tab-content .shop {
  height: 152px;
}
.tab-content .shop-img {
  width: 100px;
  margin-left: 34px;
  margin-right: 34px;
}
.tab-content .shop > h2 {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  margin-top: 10px;
  line-height: 1.72222;
  text-align: center;
}
.tab-content .shop > h3 {
  color: #e70012;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.72222;
}
.tab-content .more-info {
  width: 100px;
  height: 36px;
  line-height: 36px;
  border: 1px solid #ea340d;
  color: #ea340d;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  transition: all 0.25s;
}
.tab-content .more-info:hover {
  background-color: #ea340d;
  color: #fff;
}

.tab-control > li {
  line-height: 35px;
  height: 35px;
  text-align: center;
  color: white;
  font-size: 12px;
  font-weight: 400;
  transition: all 0.25s;
}
.tab-control > li:hover {
  background-color: #ea340d;
}

.tab-control > li:nth-child(1) {
  margin-top: 10px;
}
.tab-control > li:last-child {
  margin-bottom: 10px;
}
.show {
  display: flex;
}
.user {
  display: inline-block;
  width: 35px;
  height: 60px;
  background: url(/img/admin.png) no-repeat center;
}
.shop-car {
  display: inline-block;
  width: 35px;
  height: 60px;
  background: url(/img/shop-car.png) no-repeat center;
}
.search {
  width: 35px;
  height: 60px;
  display: inline-block;
  background: url(/img/search.png) no-repeat center;
}
.user-block {
  width: 144px;
  height: 60px;
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  right: 116px;
  top: 0px;
}
.toggle-user {
  position: absolute;
  top: 60px;
  right: -76px;
  background: #fff;
  width: 320px;
  height: 0px;
  padding: 0px;
  transition: 0.25s;
  overflow: hidden;
}
.user-block > li:nth-child(1):hover .toggle-user {
  height: 376px;
  padding: 20px;
  z-index: 999;
}
.toggle-user li:nth-child(1) {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.login {
  width: 56px;
  height: 50px;
  line-height: 50px;
  color: #e8390c;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}
.login:hover {
  color: #333;
}
.unlogin {
  width: 56px;
  height: 50px;
  line-height: 50px;
  color: #e8390c;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}
.unlogin:hover {
  color: #333;
}
.login-none {
  display: none !important;
}
.reg-des {
  color: #999;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
}
.register {
  color: rgb(80, 151, 223);
}
.common-li {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  font-weight: 400;
}
.common-li a {
  color: #999;
}

.common-li:hover a {
  color: #333;
}
.border-line {
  border-bottom: 1px solid #eee;
}
/* 轮播图区域 */
.swiper {
  --swiper-theme-color: #e8390c;
}
.swiper img {
  width: 100%;
}
.my-navig {
  opacity: 0.4;
}
.my-navig-movein {
  opacity: 1;
}
/* 内容块区域 */
.cont-block {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.cont-block > a {
  width: 50%;
}
.cont-img {
  /* display: inline-block; */
  width: 100%;
  padding: 10px 5px 5px 10px;
  box-sizing: border-box;
}
.cont-img2 {
  /* display: inline-block; */
  width: 100%;
  padding: 10px 10px 5px 5px;
  box-sizing: border-box;
}
.cont-img3 {
  /* display: inline-block; */
  width: 100%;
  padding: 5px 5px 10px 10px;
  box-sizing: border-box;
}
.cont-img4 {
  /* display: inline-block; */
  width: 100%;
  padding: 5px 10px 10px 5px;
  box-sizing: border-box;
}
/* 广告区 */
.ad-block-my {
  width: 100%;
  height: 538px;
  background: url(/img/bg-1.png) no-repeat center center/100% 538px;
}
/* 文章区 */
.cont-art {
  width: 95%;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  margin-top: 50px;
}
.cont-art img {
  width: 391px;
}
.cont-art h3 {
  margin-top: 30px;
  font-size: 14px;
  color: #414143;
}
.cont-art p {
  font-size: 18px;
  width: 391px;
  height: 60px;
  color: #333;
  margin-top: 5px;
  line-height: 31px;
  margin-bottom: 10px;
}
.cont-art a:last-child {
  color: #e40112;
  font-size: 14px;
}
/* 底栏区域 */
.foot {
  margin-top: 97px;
  width: 100%;
  height: 717px;
  background: #000000;
  color: #414143;
}
.foot-line2 {
  display: flex;
}
.dl-block {
  display: flex;
  justify-content: space-between;
  flex: 1;
}
.dl-block dt {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 20px;
}
.dl-block dd {
  font-size: 14px;
  margin-top: 11px;
  line-height: 21px;
  color: #a5a5a5;
}
.dl-block dd:hover {
  color: #fff;
}

/* 提示框 */
.tip-login {
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #e8380d;
  // width: 200px;
  padding: 0 60px;
  height: 120px;
  text-align: center;
  line-height: 120px;
  transform: translate(-50%, -50%);
  z-index: 999;
  // border: 1px solid #333;
  border-radius: 10px;
  font-size: 24px;
  color: white;
}
.xx {
  position: absolute;
  right: 3px;
  top: 3px;
  line-height: 10px;
}
.none {
  display: none;
}
/deep/.el-backtop {
  width: 100px;
  height: 100px;
  font-size: 68px;
  border-radius: 0%;
}
</style>
